<div class="bg-card relative flex w-full flex-auto dark:bg-transparent">
    <!-- Sessions list -->
    <div class="bg-card relative flex w-full min-w-0 flex-auto flex-col dark:bg-transparent sm:min-w-60 sm:max-w-60 md:min-w-80 md:max-w-80 lg:min-w-100 lg:max-w-100">
        <!-- Header -->
        <div class="flex flex-col md:flex-row md:items-center md:space-x-4 border-b bg-gray-50 px-2 py-2 sm:px-4 md:px-4 dark:bg-transparent">
            <!-- New Chat Button -->
            <div class="w-full md:w-auto">
                <button
                    mat-flat-button
                    [color]="'primary'"
                    (click)="startNewChat()"
                    class="w-full md:w-auto"
                >
                    <mat-icon svgIcon="heroicons_outline:plus"></mat-icon>
                </button>
            </div>

        <!-- New Reload Button Container -->
        <div class="w-full md:w-auto md:ml-2 mt-2 md:mt-0">
            <button
                mat-stroked-button
                (click)="forceReloadChats()"
                [disabled]="isLoading()"
                class="w-full md:w-auto"
                aria-label="Reload chat list"
            >
                <mat-icon svgIcon="heroicons_outline:arrow-path"></mat-icon>
            </button>
        </div>

            <!-- Search Field -->
            <div class="w-full md:flex-1 mt-2 md:mt-0">
                <mat-form-field
                    class="fuse-mat-rounded fuse-mat-dense w-full"
                    [subscriptSizing]="'dynamic'"
                >
                    <mat-icon
                        matPrefix
                        class="icon-size-5"
                        [svgIcon]="'heroicons_solid:magnifying-glass'"
                    ></mat-icon>
                    <input
                        matInput
                        [autocomplete]="'off'"
                        [disabled]="!(sessions() && sessions()!.length > 0) || isLoading()"
                        [placeholder]="'Search'"
                        [value]="filterTerm()"
                        (input)="onFilterSessions($event)"
                    />
                </mat-form-field>
            </div>
        </div>

        <!-- Sessions -->
        <div class="flex-auto overflow-y-auto">
            <!-- Loading State -->
            @if (isLoading()) {
                <div class="flex h-full flex-auto flex-col items-center justify-center p-4 sm:p-8">
                    <mat-progress-spinner mode="indeterminate" [diameter]="40" class="sm:diameter-50"></mat-progress-spinner>
                    <div class="mt-4 text-sm sm:text-lg font-medium">Loading chats...</div>
                </div>
            }

            <!-- Error State -->
            @if (!isLoading() && error()) {
                <div class="flex h-full flex-auto flex-col items-center justify-center p-4 sm:p-8">
                    <mat-icon class="icon-size-16 sm:icon-size-24 text-red-500" [svgIcon]="'heroicons_outline:exclamation-triangle'"></mat-icon>
                    <div class="mt-4 text-lg sm:text-2xl font-semibold tracking-tight text-center">Error Loading Chats</div>
                    <div class="text-secondary text-center text-sm sm:text-base">Could not load your chat sessions. Please try again.</div>
                    <button mat-stroked-button color="warn" (click)="retryLoadChats()" class="mt-4 sm:mt-6">
                        Retry
                    </button>
                    <!-- <pre class="mt-2 text-sm whitespace-pre-wrap">{{ error() | json }}</pre> -->
                </div>
            }

            <!-- Content Area: Chat List or No Chats Message -->
            @if (!isLoading() && !error()) {
                <div>
                    @if (hasDisplayableSessions()) {
                        @for (session of displaySessions(); track session.id) {
                            <a
                                class="relative z-20 flex cursor-pointer items-center border-b px-2 py-2 sm:px-4"
                                (click)="onSessionSelect(session)"
                                (mouseenter)="hoveredChatId.set(session.id)"
                                (mouseleave)="hoveredChatId.set(null)"
                                [ngClass]="{
                                    'dark:hover:bg-hover hover:bg-gray-100':
                                        !selectedSessionId() ||
                                        selectedSessionId() !== session.id,
                                    'bg-primary-50 dark:bg-hover':
                                        selectedSessionId() &&
                                        selectedSessionId() === session.id
                                }"
                                [routerLink]="[session.id]"
                            >
                                <div class="min-w-0 flex-1">
                                    <div class="truncate font-medium leading-5 text-sm sm:text-base">
                                        {{ session.title || 'Untitled Chat' }}
                                    </div>
                                    <!-- Optionally display last message or timestamp if available in Chat type and needed -->
                                    <!-- <div class="text-secondary mt-0.5 truncate text-sm leading-4">
                                        {{ session.lastMessage || 'No messages yet' }}
                                    </div> -->
                                </div>
                                <div class="ml-auto flex flex-col items-end self-start pl-2">
                                    <!-- <div class="text-secondary whitespace-nowrap text-xs leading-4">
                                        {{ session.lastMessageAt | date:'shortTime' }}
                                    </div> -->
                                    @if (hoveredChatId() === session.id && session.id !== NEW_CHAT_ID) {
                                        <button (click)="onClickDeleteSession($event, session)" class="absolute right-2 top-1/2 -translate-y-1/2">
                                            <mat-icon
                                                    class="text-hint icon-size-4 sm:icon-size-5 mr-1 p-0"
                                                    [svgIcon]="'heroicons_solid:trash'"
                                            ></mat-icon>
                                        </button>
                                    }
                                </div>
                            </a>
                        }
                    } @else {
                        <!-- No Chats State -->
                        <div class="flex h-full flex-auto flex-col items-center justify-center p-4 sm:p-8">
                            <mat-icon
                                class="icon-size-16 sm:icon-size-24"
                                [svgIcon]="filterTerm() ? 'heroicons_outline:magnifying-glass-circle' : 'heroicons_outline:chat-bubble-oval-left-ellipsis'"
                            ></mat-icon>
                            <div class="text-secondary mt-4 text-lg sm:text-2xl font-semibold tracking-tight text-center">
                                @if (filterTerm()) {
                                    No chats found matching "{{filterTerm()}}"
                                } @else {
                                    No chats available.
                                }
                            </div>
                            <div class="text-secondary mt-1 text-sm sm:text-base text-center">
                                @if (filterTerm()) {
                                    Try a different search term.
                                } @else {
                                    Click "New Chat" to start a conversation.
                                }
                            </div>
                        </div>
                    }
                </div>
            }
        </div>
    </div>

    <!-- Conversation -->
    <div class="flex flex-auto border-l">
        <router-outlet></router-outlet>
    </div>
</div>
